import React, { useState, useEffect } from 'react'
import { Table, Button, Modal, Switch, Input, Form } from 'antd'
import { EditOutlined, CloseCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
const { confirm, cancle } = Modal
const { form } = Form

export default function UserList() {
  const [dataSource, setdataSource] = useState([])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: 'center',
      render(id) {
        return <b>{id}</b>
      },
    },
    {
      title: '区域',
      dataIndex: 'address',
      align: 'center',
      render(address) {
        return <b>{address}</b>
      },
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      align: 'center',
      render(roleName) {
        return <b>{roleName}</b>
      },
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      align: 'center',
      render(userName) {
        return <b>{userName}</b>
      },
    },
    {
      title: '用户状态',
      align: 'center',
      render(item) {
        return <Switch checked={item.status == 1} onChange={(e) => {
          console.log(e);
        }}></Switch>
      },
    },
    {
      title: '操作',
      align: "center",
      render(item) {
        return <div>
          <Button style={{ marginRight: "10px" }} type="primary" shape="circle" icon={<EditOutlined />} onClick={() => handleChange(item)} />
          <Button type="primary" danger shape="circle" icon={<CloseCircleOutlined />} onClick={() => confirmMethod(item)} />
        </div>
      },
    },
  ]

  // 请求数据
  useEffect(() => {
    axios.get('http://localhost:5000/UserList').then(res => {
      setdataSource(res.data);
    })
  }, [])

  // 删除
  const confirmMethod = (item) => {
    confirm({
      title: '提示',
      content: '您确定删除吗?',
      onOk() {
        deleteMethod(item)
      },
      onCancel() {
        console.log('取消');
      }
    })
  }

  const deleteMethod = (item) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))
    // axios.delete(`http://localhost:5000/jurisdiction/${item.id}`.then(Res=>{
    //   console.log('删除成功');
    // }))
  }

  const [open, setOpen] = useState(false);
  const [open1, setOpen1] = useState(false);
  const onCreate = (values) => {
    console.log(values);
    axios.post('http://localhost:5000/UserList',
      { ...values }
    ).then(res => {
      // setdataSource(res.data);
      setOpen(false);

    })
  };

  const onCreate1 = (values) => {
    console.log(values);
    axios.post('http://localhost:5000/UserList',
      { ...values }
    ).then(res => {
      // setdataSource(res.data);
      setOpen(false);

    })
  };
  const onCancel1 = () => {
    setOpen(false);
  }

  const onCancel2 = () => {
    setOpen1(false);
  }

  const [form] = Form.useForm();
  const [form1] = Form.useForm();

  // 编辑
  const handleChange = (item) => {
    setOpen1(true)
  }

  return (
    <div>
      <Button type="primary" onClick={() => {
        setOpen(true);
      }}>添加用户</Button>
      <Modal
        open={open}
        title="添加用户"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel1}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              form.resetFields();
              onCreate1(values)
            })
            .catch((info) => {
              console.log('Validate Failed:', info);
            });
        }}
      >
        <Form
          form={form}
          // layout="vertical"   垂直布局
          name="form_in_modal"
          initialValues={{
            modifier: 'public',
          }}
        >
          <Form.Item
            name="userName"
            label="用户名"
            rules={[
              {
                required: true,
                message: '请填写用户名',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="roleName"
            label="角色名称"
            rules={[
              {
                required: true,
                message: '请输入角色名称',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="address"
            label="区域"
            rules={[
              {
                required: true,
                message: '请填写区域',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="status"
            label="用户状态"
            rules={[
              {
                required: true,
                message: '请填写用户状态',
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        open={open1}
        title="更新用户"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel2}
        onOk={() => {
          form1
            .validateFields()
            .then((values) => {
              form1.resetFields();
              onCreate(values)
            })
            .catch((info) => {
              console.log('Validate Failed:', info);
            });
        }}
      >
        <Form
          form={form1}
          // layout="vertical"   垂直布局
          name="form_in_modal"
          initialValues={{
            modifier: 'public',
          }}
        >
          <Form.Item
            name="userName"
            label="用户名"
            rules={[
              {
                required: true,
                message: '请填写用户名',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="roleName"
            label="角色名称"
            rules={[
              {
                required: true,
                message: '请输入角色名称',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="address"
            label="区域"
            rules={[
              {
                required: true,
                message: '请填写区域',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="status"
            label="用户状态"
            rules={[
              {
                required: true,
                message: '请填写用户状态',
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id}></Table>
    </div>
  )
}
